<template>
	<div class="container">
		<div>
			<a-table v-if="!loading" :columns="columns" :scroll="tableScroll" row-key="id" children-column-name="children" :default-expand-all-rows="false" :data-source="source" :pagination="pagination" :loading="loading" @change="initData">
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'file_path'">
						<a v-if="record.file_path && record.file_path.length" :href="record.file_path[0].url" target="_blank">{{ record.file_path[0].name }}</a>
					</template>
				</template>
			</a-table>
		</div>
		<div class="text-center">
			<div class="flex">
				<div style="flex:1">
					<a-button type="default" @click="closeTab('/price/list')">返回</a-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { computed, getCurrentInstance, inject, reactive, ref } from "vue";
import { usePagination } from "vue-request";
import { post } from "@/utils/index.js";
import { EditOutlined, PlusOutlined, SearchOutlined, SnippetsOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const searchRef = ref();
const searchState = reactive({});
const brandList = ref([]);
const route = useRoute();
const router = useRouter();
const query = route.query;
post("dictionary", { root_id: 1414 }).then(data => {
	brandList.value = data;
});

const columns = [
	{
		title: "序号",
		dataIndex: "id",
		key: "id",
		width: 80,
		align: "left",
		customRender: ({ text, record, index, column }) => {
			return index + 1;
		}
	},
	{
		title: "浮动物资类型",
		dataIndex: "price_type",
		width: 100,
		align: "left",
		customRender: ({ text, record, index, column }) => {
			return record.price_type === 1 ? "月浮动物资" : "日浮动物资";
		}
	},
	{
		title: "物资名称",
		dataIndex: "material_name",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return record.material?.name;
		}
	},
	{
		title: "规格型号",
		dataIndex: "model",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return record.material?.model;
		}
	},
	{
		title: "计量单位",
		dataIndex: "unit",
		sorter: false,
		width: 100,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return record.material?.unit;
		}
	},
	{
		title: "品牌/厂家",
		dataIndex: "brand",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.name || '';
		}
	},
	{
		title: "区域",
		dataIndex: "region_text",
		sorter: false,
		width: 150,
		ellipsis: true,
	},
	{
		title: "设置日期",
		dataIndex: "setting_date",
		sorter: false,
		width: 100,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			const settingDate = record.setting_date;
			return record.price_type === 1 ? dayjs(settingDate).format('YYYY-MM') : settingDate;
		}
	},
	{
		title: "生效时间",
		dataIndex: "effective_date_range",
		sorter: false,
		width: 180,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			const priceType = record.price_type;
			return priceType === 1 ? [dayjs(record.effective_start_time).format('YYYY-MM-DD'), dayjs(record.effective_end_time).format('YYYY-MM-DD')].join('~') 
				: dayjs(record.effective_start_time).format('YYYY-MM-DD');
		}
	},
	{
		title: "不含税基准价",
		dataIndex: "price",
		sorter: false,
		width: 100,
		ellipsis: true,
	},
	{
		title: "附件",
		dataIndex: "file_path",
		sorter: false,
		width: 100,
		ellipsis: true,
	},
	{
		title: "维护人",
		dataIndex: "user",
		sorter: false,
		width: 100,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return text?.fullname;
		}
	},
	{
		title: "维护时间",
		dataIndex: "create_time",
		width: 150,
		align: "center"
	}
];
const tableScroll = computed(() => ({ x: document.documentElement.clientWidth - 650 }));
const { data, loading, run, current, pageSize, total } = usePagination(params => post("price/history", { ...params, ...searchState }), {
	defaultParams: [
		{
			page_size: 10
		}
	],
	pagination: {
		currentKey: "page",
		pageSizeKey: "page_size",
		totalKey: "total"
	}
});
const source = computed(() =>
	(data.value?.data || []).map(d => {
		if (d.children?.length === 0) delete d.children;
		const { material, setting_date, price_type, region_text, brand } = d.priceMaterial;
		Object.assign(d, {
			material, setting_date, price_type, region_text, brand
		})
		if (d.file_path) {
			d.file_path = JSON.parse(d.file_path);
		}
		return d;
	})
);
const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));

const initData = (pag, filters, sorter) => {
	pag = Object.assign(
		{
			current: current.value,
			pageSize: pageSize.value
		},
		pag || {}
	);
	filters = { ...filters, ...searchState };

	run({
		page_size: pag?.pageSize,
		page: pag?.current,
		sort_field: sorter?.field,
		sort_order: sorter?.order,
		...filters
	});
};
if (query) {
	if (query.project_id) searchState.project_id = parseInt(query.project_id);
	if (query.price_type) searchState.price_type = parseInt(query.price_type);
	if (query.material_id) searchState.material_id = query.material_id;
	if (query.region) searchState.region = query.region;
	const pag = {};
	if (query.page) {
		pag['current'] = parseInt(query.page);
	}
	if (query.pageSize) {
		pag['pageSize'] = parseInt(query.page_size);
	}
	initData(pag);
}
const closeTab = inject("closeTab");
</script>
<style scoped lang="scss">
.container {
  background: #fff;
  padding: 12px;
}
</style>